<template>
    <div class="">
        <el-dialog
            title="修改密码"
            v-dialogDrag
            :visible.sync="ChangePasswordVisible"
            ref="phone"
            width="330px"
            :modal-append-to-body="true"
            :append-to-body="true"
            @close="resetForm('ruleForm')"
            :close-on-click-modal="false"
            center
        >
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" @submit.native.prevent>
                <el-form-item label="" prop="Username">
                    <el-input type="text" placeholder="请输入用户名" v-model.trim="ruleForm.Username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="Originalpassword">
                    <el-input type="password" placeholder="请输入原密码" v-model.trim="ruleForm.Originalpassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="Newpassword">
                    <el-input type="password" placeholder="请输入新密码" v-model.trim="ruleForm.Newpassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="Repeatnewpassword">
                    <el-input type="password" placeholder="请输入二次新密码" v-model.trim="ruleForm.Repeatnewpassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="margin-top: 24px" type="primary" class="button_btn" @click="DefiniteModification('ruleForm')">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
  props: {},
  created () { },
  data () {
    const phonevalidatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.Newpassword !== '') {
          this.$refs.ruleForm.validateField('ChangePass');
        }
        callback();
      }
    };
    const phonevalidatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.Newpassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    const phonevalidatePass3 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.Originalpassword !== '') {
          this.$refs.ruleForm.validateField('OriginalPass');
        }
        callback();
      }
    };
    return {
      ChangePasswordVisible: false,
      ruleForm: {
        Username: '', //用户名
        Originalpassword: '', //原始密码
        Newpassword: '', //新密码
        Repeatnewpassword: '' //二次新密码
      },
      rules: {
        Username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        Originalpassword: [{ validator: phonevalidatePass3, trigger: 'blur' }, { min: 4, max: 18, message: '密码必须在4-18位之间', trigger: 'blur' }],
        Newpassword: [{ validator: phonevalidatePass, trigger: 'blur' }, { min: 4, max: 18, message: '密码必须在4-18位之间', trigger: 'blur' }],
        Repeatnewpassword: [{ validator: phonevalidatePass2, trigger: 'blur' }],
      }
    }
  },
  mounted () { },
  methods: {
    DefiniteModification (formName) {
      try {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            var that = this
            const username = this.ruleForm.Username
            const originalPassword = this.ruleForm.Originalpassword
            const resetPassword = this.ruleForm.Newpassword
            const reenterResetPassword = this.ruleForm.Repeatnewpassword
            game.modify_account(username, originalPassword, resetPassword, reenterResetPassword, function (result) {
              if (result) {
                setTimeout(() => {
                  if (game.modify_account_info.status === 1003) {
                    that.$message({ message: game.modify_account_info.msg, type: 'success', center: true })
                    that.ChangePasswordVisible = false
                  } else {
                    that.$message({ message: game.modify_account_info.msg, type: 'warning', center: true })
                  }
                }, 1000)
              } else {
                that.$message({ message: '请求失败,请稍后再试', type: 'warning', center: true })
                return false;
              }
            })
          }
        });
      } catch (err) {
        console.log(err);
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
  },
  computed: {},
  watch: {},
  components: {},
}
</script>

<style scoped lang='less'>
/deep/ .el-dialog__body {
    background: url('@/assets/dialogImg/Pop-up_bj.png');
    height: 384px !important;
}
/deep/ .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #A47E49;
    border-radius: 4px;
    color: #dddddd;
}
/deep/.el-input__inner:hover,
.el-input__inner:focus {
    border-color: #ffb331;
}
/deep/ .el-input__inner:focus {
    border-color: #ffb331;
}
/deep/input::-webkit-input-placeholder {
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #7B7059;
    font-family: '微软雅黑';
}
</style>
